page {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  background: #ffffff;
  .scroll {
    height: calc(100vh - 140rpx);
    overflow: hidden;
    .swiper-area {
      height: 400rpx;
      .swiper {
        height: 400rpx;
        .swiper-item {
          height: 400rpx;
          .swiper-img {
            width: 100%;
            height: 400rpx;
          }
        }
      }
    }
    .header {
      margin-top: 54rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-title {
        width: calc(100% - 80rpx);
        display: flex;
        flex-direction: column;
        .title {
          color: #333;
          font-size: 38rpx;
          font-weight: bold;
        }
        .price {
          margin-top: 24rpx;
          color: #ff3e3e;
          font-size: 36rpx;
        }
      }
      .header-collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 42rpx;
          height: 42rpx;
        }
        text {
          margin-top: 14rpx;
          color: #666;
          font-size: 26rpx;
        }
      }
    }

    .service-info {
      margin-top: 44rpx;
      padding: 0 30rpx;
      .service {
        background: #f9f9f9;
        padding: 25rpx 30rpx 30rpx 30rpx;
        display: flex;
        align-items: flex-start;
        .logo {
          border-radius: 50%;
          height: 100rpx;
          width: 100rpx;
          image {
            height: 100rpx;
            width: 100rpx;
          }
        }
        .describe {
					display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .title {
            color: #333;
            font-size: 32rpx;
            font-weight: bold;
            width: 500rpx;
          }
          .goods {
            margin-top: 24rpx;
            width: 500rpx;
            color: #999;
            font-size: 24rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .service-detail {
      margin-top: 50rpx;
      padding: 0 30rpx;
      .title {
        padding-bottom: 30rpx;
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
      }
      .service-content {
        padding: 40rpx 0;
        .content {
          width: 690rpx;
          margin-bottom: 40rpx;
          display: flex;
          align-items: flex-start;
          position: relative;
          .icon {
            top: 6rpx;
            position: absolute;
            height: 22rpx;
            width: 4rpx;
            background: #0177fd;
          }
          .content-item {
            width: calc(100% - 20rpx);
            margin-left: 16rpx;
            display: flex;
            flex-direction: column;
            .content-title {
              color: #999;
              font-size: 24rpx;
            }
            .detail {
              width: 100%;
              margin-top: 15rpx;
              color: #333;
              font-size: 24rpx;
              line-height: 36rpx;
            }
          }
        }
      }
    }
  }
  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    color: #fff;
    padding: 0 30rpx;
    display: flex;
    justify-content: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 68rpx;
    .btn-ask {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 345rpx;
      height: 75rpx;
      border-top-left-radius: 50rpx;
      border-bottom-left-radius: 50rpx;
      background: linear-gradient(90deg, #fe8f43 0%, #fec66f 100%);
    }
    .btn-buy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 345rpx;
      height: 75rpx;
      border-top-right-radius: 50rpx;
      border-bottom-right-radius: 50rpx;
      background: linear-gradient(90deg, #fd3633 0%, #ff6634 100%);
    }
  }
}
